<script setup >
import {ref, onMounted} from 'vue'
import {useRouter, useRoute} from 'vue-router'

const route = useRoute()
const router = useRouter()
// 底部导航栏选择的索引
const active = ref(0)

onMounted(() => {
  const data = router.options.routes[0]
  // 计算当前路由在底部导航中的索引
  const currentIndex = data.children.findIndex(item => '/' + item.path === route.path)
  console.log('Current tab index:', currentIndex)
  active.value = currentIndex
})


</script>

<template>
  <router-view></router-view>
  <van-tabbar v-model="active">
    <van-tabbar-item v-for="item in router.options.routes[0].children" :icon="item.meta.icon" :key="item.path" @click="router.push(item.path)">{{ item.meta.name }} </van-tabbar-item>
    
  </van-tabbar>
</template>

<style scoped></style>
